<template>
  <view v-if="showLive" class="x-live" :style="[styles]">
    <template v-if="detail.templateType === 26">
      <channel-live :feed-id="feedId" :finder-user-name="componentContent.channelsId" />
    </template>

    <view @click="handleWatchLive">
      <template v-if="detail.templateType === 27">
        <view class="card" :style="[cardStyle]">
          <view class="cover">
            <x-image :src="headUrl" />
          </view>
          <view class="info">
            <view class="title">
              <view class="title-text">{{ componentContent.title }}</view>
              <IconLive type="red" :status="status" />
            </view>
            <view class="btn-watch" :style="[buttonStyle]">立即观看</view>
          </view>
        </view>
      </template>

      <template v-if="detail.templateType === 28">
        <view class="card small-2" :style="[cardStyle]">
          <view class="cover">
            <x-image v-if="contentStyle.mediaType===1" :src="contentStyle.imgUrl" />
            <video v-else class="video" object-fit="cover" :controls="false" autoplay loop :src="contentStyle.videoUrl" />
            <IconLive class="icon-live" :status="status" />
          </view>
          <view class="info">
            <view class="title">
              {{ componentContent.title }}
            </view>
            <view class="btn-watch" :style="[buttonStyle]">立即观看</view>
          </view>
        </view>
      </template>

      <template v-if="detail.templateType === 29">
        <view class="card big" :style="[cardStyle]">
          <view class="cover">
            <x-image v-if="contentStyle.mediaType===1" :src="contentStyle.imgUrl" />
            <video v-else class="video" object-fit="cover" :controls="false" autoplay loop :src="contentStyle.videoUrl" />
            <IconLive class="icon-live" :status="status" />
          </view>
          <view
            :class="[
            'info',
            {
              light: componentContent.contentStyle.theme.value === 0,
              dark: componentContent.contentStyle.theme.value === 1
            }
          ]"
          >
            <view class="title">
              {{ componentContent.title }}
            </view>
            <view class="btn-watch" :style="[buttonStyle]">立即观看</view>
          </view>
        </view>
      </template>

      <template v-if="detail.templateType === 30">
        <view class="card pic" :style="[cardStyle]">
          <view :class="['cover', { fullScreen: componentContent.contentStyle.objectFit.value === 0 }]">
            <x-image v-if="contentStyle.mediaType===1" :mode="componentContent.contentStyle.objectFit.value === 0 ? 'aspectFill' : 'widthFix'" :src="contentStyle.imgUrl" />
            <video v-else class="video" object-fit="cover" :controls="false" autoplay loop :src="contentStyle.videoUrl" />
            <IconLive class="icon-live" shape="circle" />
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script>

import formatStyle from '@/utils/x-format-style';
import IconLive from './IconLive.vue';
import XImage from '@/components/x-image';
export default {
  name: 'XLive',
  components: {
    IconLive,
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showLive: false,
      headUrl: '',
      feedId: '',
      nonceId: '',
      status: 0,
      noticeInfo: {
        nonceId: '',
        status: 0,
        reservable: false
      }
    };
  },
  computed: {
    // 模块样式
    componentStyle() {
      return this.detail.componentStyle || {};
    },

    styles() {
      return formatStyle(this.componentStyle, ['marginBottom', 'padding', 'backgroundColor']);
    },

    componentContentList() {
      return this.detail.componentContentList || [];
    },

    componentContent() {
      return this.componentContentList[0] || {};
    },

    contentStyle() {
      return this.detail.componentContentList[0] ? this.detail.componentContentList[0].contentStyle || {} : {};
    },

    buttonStyle() {
      return formatStyle({
        backgroundColor: this.contentStyle.buttonColor,
        color: this.contentStyle.buttonTextColor
      }, ['backgroundColor', 'color']);
    },

    cardStyle() {
      const styles = ['backgroundColor', 'marginLeft', 'marginRight', 'borderRadius', 'overflow'];
      if (this.detail.templateType === 27 && this.contentStyle.backgroundImage) {
        styles.push('backgroundImage', 'backgroundRepeat', 'backgroundSize');
      }
      return formatStyle({
        backgroundColor: this.contentStyle.backgroundColor,
        marginLeft: this.contentStyle.margin,
        marginRight: this.contentStyle.margin,
        borderRadius: this.contentStyle.borderRadius === 2 ? 20 : 0,
        backgroundImage: `url(${this.contentStyle.backgroundImage})`,
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'cover',
        overflow: 'hidden'
      }, styles);
    }
  },
  watch: {},
  created() {
    this.getChannelsLiveInfo();
  },
  methods: {
    getChannelsLiveInfo() {
      uni.getChannelsLiveInfo({
        finderUserName: this.componentContent.channelsId,
        success: (res) => {
          this.headUrl = res.headUrl;
          this.feedId = res.feedId;
          this.nonceId = res.nonceId;
          this.status = res.status; // 2直播中 3直播结束

          if (res.status === 2) {
            this.showLive = true;
          } else {
            if (this.contentStyle.endShow) {
              this.showLive = true;
            }

            if (this.contentStyle.notice) {
              this.getChannelsLiveNoticeInfo();
            }
          }
        }
      });
    },
    getChannelsLiveNoticeInfo() {
      uni.getChannelsLiveNoticeInfo({
        finderUserName: this.componentContent.channelsId,
        success: (res) => {
          this.noticeInfo = res;
          this.showLive = true;
        },
        fail: () => {
          this.showLive = this.contentStyle.endShow;
        }
      });
    },
    handleWatchLive() {
      if (this.noticeInfo.noticeId) {
        // 预约直播
        uni.reserveChannelsLive({
          noticeId: this.noticeInfo.noticeId
        });
      } else {
        uni.openChannelsLive({
          finderUserName: this.componentContent.channelsId,
          feedId: this.feedId,
          nonceId: this.nonceId,
          success: (res) => {
            console.log(res);
          },
          fail: (err) => {
            console.log(err);
          }
        });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  display: flex;
  align-items: center;
  padding: 20px;

  .cover {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    overflow: hidden;

    .video {
      width: 100%;
      height: 100%;
    }
  }

  .info {
    padding-left: 20px;
    display: flex;
    align-items: center;
    flex: 1;

    .title {
      flex: 1;
      font-size: 30px;
      font-weight: 500;

      .title-text{
        margin-bottom: 6px;
      }
    }

    .btn-watch {
      flex: none;
      margin-left: 12px;
    }
  }

  &.small-2 {
    height: 360px;
    padding: 0;
    .cover {
      position: relative;
      width: 360px;
      height: 100%;
      border-radius: 0;
      overflow: hidden;

      .icon-live {
        position: absolute;
        top: 20px;
        left: 20px;
      }
    }

    .info {
      display: flex;
      padding: 20px;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      height: 100%;

      .btn-watch {
        flex: none;
        margin-top: 12px;
        align-self: flex-end;
      }
    }
  }

  &.big {
    position: relative;
    padding: 0;
    height: 460px;
    .cover {
      width: 100%;
      height: 100%;
      border-radius: 0;
      overflow: hidden;

      .icon-live {
        position: absolute;
        top: 20px;
        left: 20px;
      }
    }

    .info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 120px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      flex: 1;

      &.light {
        background: #ffffff;
      }
      &.dark {
        background: linear-gradient(rgba(0, 0, 0, 0), rgba(65, 65, 65, 0.46));
        color: #ffffff;
      }
    }
  }

  &.pic {
    position: relative;
    padding: 0;
    .cover {
      width: 100%;
      height: 100%;
      border-radius: 0;
      overflow: hidden;

      &.fullScreen {
        height: 100vh;
      }

      video{
        min-height: 66.6vw;
      }

      .icon-live {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .btn-watch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #fb4026;
    border-radius: 40px;
    padding: 6px 16px;
  }
}
</style>
